export default {
    data() {
        return {
            isShow: false,
            product: {
                name: '',
                price: 0,
                num: 0,
                url: '',
                state: false,
                singlePrice: 0
            },
        }
    },
    methods: {
        onShowHide() {
            this.$store.dispatch('setShow')
        },
        onAddProduct() {
            let id = Math.floor(Math.random() * (10000 - 1000) + 1000)
            let product = {
                id,
                ...this.product
            }
            this.$store.dispatch('addProduct', product)
            //清空表单内容
            this.product = {
                id: this.len,
                name: '',
                price: 0,
                num: 0,
                url: '',
                singlePrice: 0
            }
            this.onShowHide()
        }
    },
    template: `<div class="cart-add" v-show="this.$store.state.isShow">
                <a href="javascript:void(0)" class="close" @click="onShowHide">&times;</a>
                <form @submit.prevent>
                    <input type="text" name="name" v-model="product.name" placeholder="请输入商品名称"><br>
                    <input type="text" name="price" v-model="product.price" placeholder="请输入商品价格"><br>
                    <input type="text" name="num" v-model="product.num" placeholder="请输入商品数量"><br>
                    <input type="text" name="url" v-model="product.url" placeholder="请输入商品图片地址"><br>
                    <button class="add-btn" @click="onAddProduct">添加商品</button>
                </form>
            </div>`
}